import React from 'react'
import { Flex, Icon } from 'antd-mobile' // flex组件
import styles from './index.module.scss'

const titleList = [
  { title: "区域", type: "area" },
  { title: "方式", type: "mode" },
  { title: "租金", type: "price" },
  { title: "筛选", type: "more" }
]

export default function FilterTitle ({ activeList, changeActive }) {
  return (
    <>
      <Flex className={styles.filterTitle} >
        {titleList.map((item,index) => {
          return (
            <div className={styles.flexitem} onClick={_ => changeActive(item.type)} key={item.title}>
              <span className={ activeList[item.type] ? styles.active : ''}>{item.title}</span> <i className="iconfont icon-arrow" />
            </div>
          )
        })}
        
      </Flex>
    </>
  )
}